/*固定布局
#wrapper{
    margin: 0 auto;
    width: 960px;
}
header{
    margin: 0 10px;
    width: 940px;
    height: 90px;
    background-color: #c0c0c0;
}
#navigation{
    margin-left: 300px;
    width: 940px;
}
#navigation li{
    display: inline-block;
}
#navigation li a{
    height: 35px;
    margin-right: 25px;
    text-decoration: none;
    font-family: sans-serif;
}
#sidebar{
    margin: 0 10px;
    width: 220px;
    height: 600px;
    float: left;
    background-color: #cccccc;
}
#content{
    margin: 0 10px;
    width: 700px;
    height: 600px;
    float: right;
    background-color: #dedede;
}
#image{
    width: 300px;
    margin: 0;
    height: 600px;
    float: left;
}
article{
    margin: 0 20px;
    width: 360px;
    height;600px;
    float: right;
}
footer{
    margin: 0 10px;
    width: 940px;
    height: 70px;
    background-color: #555555;
    clear: both;
}
固定布局*/
/*d百分比布局
#wrapper{
    margin: 0 auto;
    width: 96%;
}
header{
    margin: 0 10px;
    width: 97.916667%;
    height: 90px;
    background-color: #c0c0c0;
}
#navigation{
    margin-left: 300px;
    width:97.916667%;
}
#navigation li{
    display: inline-block;
}
#navigation li a{
    height: 35px;
    margin-right: 25px;
    text-decoration: none;
    font-family: sans-serif;
}
#sidebar{
    margin: 0 10px;
    width: 22.916666%;
    height: 600px;
    float: left;
    background-color: #cccccc;
}
#content{
    margin: 0 10px;
    width: 72.916666%;
    height: 600px;
    float: right;
    background-color: #dedede;
}
#image{
    width: 31.25%;
    margin: 0;
    height: 600px;
    float: left;
}
article{
    margin: 0 20px;
    width: 37.5%;
    height: 600px;
    float: right;
}
footer{
    margin: 0 10px;
    width: 97.916667%;
    height: 70px;
    background-color: #555555;
    clear: both;
}
百分比布局*/
/*将px转换为em*/
#wrapper{
    margin: 0 auto;
    width: 960px;
}
header{
    margin: 0 10px;
    width: 940px;
    height: 90px;
    background-color: #c0c0c0;
}
#navigation{
    margin-left: 300px;
    width: 940px;
}
#navigation li{
    display: inline-block;
}
#navigation li a{
    height: 35px;
    margin-right: 25px;
    text-decoration: none;
    font-family: sans-serif;
}
#sidebar{
    margin: 0 10px;
    width: 220px;
    height: 600px;
    float: left;
    background-color: #cccccc;
}
#content{
    margin: 0 10px;
    width: 700px;
    height: 600px;
    float: right;
    background-color: #dedede;
}
#image{
    width: 300px;
    margin: 0;
    height: 600px;
    float: left;
}
article{
    margin: 0 20px;
    width: 360px;
    height;600px;
    float: right;
}
footer{
    margin: 0 10px;
    width: 940px;
    height: 70px;
    background-color: #555555;
    clear: both;
}
/*将px转换为em*/
/*媒体查询
body{
    background-color: grey;
}

@media screen and (max-width: 960px) {
    body{
        background-color;red;
    }
}
@media screen and (max-width: 780px) {
    body{
        background-color;green;
    }
}
@media screen and (max-width: 550px) {
    body{
        background-color;yellow;
    }
}
媒体查询*/
/*过渡
#conttent a{
    ...其它样式...
    transition-property: all;
    transition-duration:1s;
    transition-timing-function:ease;
    transition-delay:0s;
}
*/
/*
#content a{
    transition:all 1s ease 0s;
}
*/
/*
#content a{
    transition-property:border,color,text-shadow;
    transiton-duration:2s,3s 8s;
}
#navigation{
    transform:translate(40px,40px);
    transform:scale(0.5);
    transform:rotate(90deg);
    transform:skew(10deg,20deg);
}
*/
/*
@keyframes warning{
    0%{
        text-shadow: 0 0 4px #000000 ;
    }
    50%{
        text-shadow:0 0 20px #000000;
    }
    100%{
        text-shadow:0 0 4px #000000
    }
}
h5{
    font-size: 4em;
    color: #f2050b;
    text-align: center;
    animation:warning 1.5s infinite ease-in
}
*/

